<template>
  <div class="chuangjianwaihu">
    <div class="kflexc" style="margin-bottom: 20px;">
      <div style="color: rgb(25, 137, 250); cursor: pointer;" @click="fanhui"><< 返回</div>
      <div class="titles">创建外呼任务</div>
    </div>

    <div style="padding:20px 40px;">
      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="l1">任务名称</div>
        <div class="l2">
          <el-input placeholder="请输入任务名称" v-model="all.name"></el-input>
        </div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="l1">任务执行方式</div>
        <div class="l2">
          <el-select v-model="all.is_add_user" placeholder="输入任务执行方式">
            <el-option label="仅外呼" :value="2"></el-option>
            <el-option label="外呼且加人" :value="1"></el-option>
          </el-select>
        </div>
      </div>

      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="l1">任务类型</div>
        <div class="l2">
          <el-select v-model="all.type" placeholder="输入任务类型">
            <el-option  v-for="(item,index) in taskTypeList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
      </div>

      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="l1">关联短信任务</div>
        <div class="l2">
          <el-select v-model="all.sms_task_id" placeholder="请选择">
            <el-option :label="item.name" :value="item.id" v-for="item in duanxinlists" :key="item.id"></el-option>
          </el-select>
        </div>
      </div>


      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="l1">紧急程度</div>
        <div class="l2">
          <el-select v-model="all.urgency" placeholder="输入紧急程度">
            <el-option label="普通" value="0"></el-option>
            <el-option label="较高" value="1"></el-option>
            <el-option label="很高" value="2"></el-option>
          </el-select>
        </div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="l1">任务列表</div>
        <div class="l2">
          已选择 <span style="color: rgb(25, 137, 250); margin: 0 10px;">{{shuliang}}</span> 人
        </div>
      </div>
      <div class="kflex" style="margin-bottom: 20px;">
        <div class="l1">话术要求</div>
        <div class="l2">
          <el-input type="textarea" :rows="5"  placeholder="请输入内容" v-model="all.demand"></el-input>
        </div>
      </div>
      <div>
        <el-button round @click="chuangjian" :disabled="ing" type="danger" plain>确定创建</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: 'chuangjianwaihu',
    data() {
      return {
        ing:false,
        search:{},
        list:"",
        jieguo:{
          name:"人群短信通知结果",
          log:false,
          list:""
        },
        all:{
          "name": "",
          "type": "",
          "data": [],
          "demand": "",
          "urgency": "",
          is_add_user:2,
          crowd_id:this.$route.query.id,
          sms_task_id:""
        },
        taskTypeList:"",
        shuliang:"",
        duanxinlists:""
      }
    },
    created() {
      this.getproductstype()
      this.shuliang = this.$route.query.shuliang
      //获取人然后加入all.data {"order_ids": 11111, "source_ids": ""}

      axios.get('/api/plan-market/message/getrenwulist?order_status=-999&status=1')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.duanxinlists = response.data.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })

    },
    methods:{
      fanhui:function(){
        this.$router.go(-1)
      },
      search:function(){

      },
      //获取产品类型
      getproductstype:function(){
      	axios.get("/api/plan-market/call/config/list/v2")
      	  .then(response=> {
      		  if(response.data.msg.code == 0){

              this.taskTypeList = response.data.data

      		  }else{
      		  	this.$message.error(response.data.msg.info);
      		  }
      	  })
      },
      chuangjian:function(){
        this.ing = true

        axios.post("/api/plan-market/crowd/call-create/v2",this.all)

          .then(response=> {
        	  if(response.data.msg.code == 0){
              this.$message.success('创建任务成功');
              setTimeout(()=>{
                this.ing = false
              },500)
              this.$router.go(-1)
        	  }else{
        	  	this.$message.error(response.data.msg.info);
        	  }
          })
      },
      getlist:function(){


      },

    }
  }
</script>

<style lang="scss" scoped>
  .chuangjianwaihu{ padding: 20px;
    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0; width: 250px;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .titles{ font-size: 20px; font-weight: bold; font-family: '微软雅黑'; margin-left: 20px;}
    .l1{ font-size: 14px; color: rgb(51, 51, 51); width: 100px; text-align: right; margin-right: 20px;}
    .l2{ font-size: 14px; width: 400px;}
  }
</style>
